<template>
	<view class="mine-address-edit">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'更改收货地址'" :deleteStatus="true" @delete="deleteAddress"></navBar>
		</view>
		<view class="content">
			<view class="edit-content-input">
				<view class="input-title">收货人</view>
				<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder=""
					maxlength="8" v-model="consignee" :focus="consigneeFocus" @blur="consigneeLostFocus"></input>
			</view>
			<view class="edit-content-input">
				<view class="input-title">联系电话</view>
				<input class="input-style" type="number" placeholder-class="input-placeholder" placeholder=""
					maxlength="11" v-model="mobile" :focus="mobileFocus" @blur="mobileLostFocus"></input>
			</view>
			<view class="edit-content-input-two">
				<view class="input-title">所在地区</view>
				<view class="area-content">
					<view class="area-input">
						<picker mode="multiSelector" :range="list_two" :value="multiIndex" range-key="areaName"
							@columnchange="pluginclass" @change="changeCon">
							<view class="text">{{ address_two }}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="edit-content-input">
				<view class="input-title">详细地址</view>
				<input class="input-style" type="text" placeholder-class="input-placeholder" placeholder=""
					maxlength="30" v-model="address" :focus="addressFocus" @blur="addressLostFocus"></input>
			</view>
			<view class="edit-content-input">
				<view class="input-title">设为默认地址</view>
				<u-switch activeColor="#F71D1F" inactiveColor="#c9c9cc" v-model="default_switch"
					@change="changeDefault">
				</u-switch>
			</view>
			<view class="edit-button" @click="save">保存</view>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		deladdress, // 删除地址
		editaddress,
		GETprovince,
		GETcity,
		GETarea
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 获取地址信息 */
				addressItem: {}, // 地址对象
				addressID: '', // 地址编号
				consignee: '', // 收货人姓名
				consigneeFocus: false, // 收货人状态
				mobile: '', // 收货人手机号
				mobileFocus: false, // 手机号状态

				/* 城市选择 */
				address_two: '省、市、区', // 地址
				province: '省份', // 省份
				city: '城市', // 城市
				area: '地区', // 地区
				list: {
					provinceList: [], // 省份列表
					cityList: [], // 城市列表
					areaList: [] // 地区列表
				},
				provinceID: '', // 省份编号
				cityID: '', // 城市编号
				areaID: '', // 地区编号
				multiIndex: [0, 0, 0],
				list_two: [
					[],
					[],
					[]
				],
				cityStatus: false, // 城市不可点击
				areaStatus: false, // 地区不可点击
				address: '', // 详细地址
				addressFocus: false, // 地址状态

				/* switch选择 */
				default_switch: false, // 是否设置默认
			};
		},
		onLoad(e) {
			/* 获取地址 */
			const p = new Promise((resolve, reject) => {
				if (e.option) {
					this.addressItem = JSON.parse(decodeURIComponent(e.option));
					resolve();
				};
			});
			p.then((res) => {
				this.setItem(); // 设置地址信息
			});
		},
		onShow() {

		},
		methods: {
			
			/* 删除地址 */
			deleteAddress() {
				const that = this;
				const params = {
					addressId: that.addressID
				};
				deladdress(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						Fn.Toast('删除成功', 3, 700);
						setTimeout((res) => {
							uni.navigateBack();
						}, 800);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 获取地址信息 */
			setItem() {
				this.addressID = this.addressItem.id;
				this.consignee = this.addressItem.consignee;
				this.mobile = this.addressItem.mobile;
				this.province = this.addressItem.province;
				this.city = this.addressItem.city;
				this.area = this.addressItem.area;
				this.provinceID = this.addressItem.provinceId;
				this.cityID = this.addressItem.cityId;
				this.areaID = this.addressItem.areaId;
				this.address = this.addressItem.address;
				this.address_two = this.addressItem.province + ' ' + this.addressItem.city + ' ' + this.addressItem.area;
				if (this.addressItem.isDefault === 1) {
					this.default_switch = true;
				} else {
					this.default_switch = false;
				};
				this.getProvice();
			},

			/* 保存收货地址 */
			save() {
				const that = this;
				let isDefault = 0;
				if (that.consignee === '') {
					Fn.Toast('收货人不能为空!', 3, 1500);
					that.consigneeFocus = true;
					return;
				};
				if (that.mobile === '') {
					Fn.Toast('联系电话不能为空!', 3, 1500);
					that.mobileFocus = true;
					return;
				};
				if (that.province === '省份' || that.city === '城市' || that.area === '地区') {
					Fn.Toast('请选择所在地区!', 3, 1500);
					return;
				};
				if (that.address === '') {
					Fn.Toast('详细地址不能为空!', 3, 1500);
					that.addressFocus = true;
					return;
				};
				if (that.default_switch) {
					isDefault = 1;
				} else {
					isDefault = 0;
				};
				const params = {
					addressId: that.addressID,
					name: that.consignee,
					phone: that.mobile,
					provinceId: that.provinceID,
					cityId: that.cityID,
					areaId: that.areaID,
					userAddress: that.address,
					isDefault: isDefault
				};
				editaddress(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						Fn.Toast('添加成功', 3, 1500);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择地区 */
			getProvice() {
				const that = this;
				GETprovince().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.list.provinceList = result;
						that.list_two[0] = result;
						that.getCity(0);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择城市 */
			getCity(id) {
				const that = this;
				const params = {
					provinceId: that.list.provinceList[id].areaId /* that.provinceID */
				};
				GETcity(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.list.cityList = result;
						that.getArea(0);
						that.list_two.splice(1, 1, result); // 将第二列获取的数据放在新的选项中，此处用$set设置数组中的元素效果一样
						this.list_two.splice(2, 1,
							[]); // 将第三列清空，不然如果选择了新的省，但是没有选择市的时候，那么区的数据就没有更新，此处清空区的数据，等市选择之后再把区的数据更新
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择地区 */
			getArea(id) {
				const that = this;
				const params = {
					cityId: that.list.cityList[id].areaId /* that.cityID */
				};
				GETarea(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.list.areaList = result;
						that.list_two.splice(2, 1, result);
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 多列地区选择器 */
			pluginclass(e) {
				const that = this;
				// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
				if (e.detail.column === 0) {
					that.multiIndex[e.detail.column] = e.detail.value;
					that.getCity(e.detail.value);
					that.getArea(0);
				} else if (e.detail.column === 1) {
					that.multiIndex[e.detail.column] = e.detail.value;
					that.getArea(e.detail.value)
				};
			},

			/* 多列选择地址 */
			changeCon(e) {
				//点击确认之后获取对应的省市区，因为这个picker本身没有做限制，比如选只选择一列数据，也是允许提交的，但是获取省市区的时候，因为没有选择区，所以我用三元运算符手动设置限制，如果没选择的话会获取到一个空
				let province = this.list_two[0][e.detail.value[0]] ? this.list_two[0][e.detail.value[0]].areaName : '';
				let city = this.list_two[1][e.detail.value[1]] ? this.list_two[1][e.detail.value[1]].areaName : '';
				let area = this.list_two[2][e.detail.value[2]] ? this.list_two[2][e.detail.value[2]].areaName : '';
				if (!(province && city && area)) {
					Fn.Toast('请选择完整的省市区！', 3, 1500);
				} else {
					this.address_two = province + ' ' + city + ' ' + area;
					this.provinceID = this.list_two[0][this.multiIndex[0]].areaId;
					this.cityID = this.list_two[1][this.multiIndex[1]].areaId;
					this.areaID = this.list_two[2][this.multiIndex[2]].areaId;
				};
			},

			/* 选择省份 */
			changeProvince(e) {
				const that = this;
				let index = e.target.value;
				that.province = that.list.provinceList[index].areaName;
				that.provinceID = that.list.provinceList[index].areaId;
				that.cityStatus = true;
				that.areaStatus = true;
				if (that.province != '省份') {
					that.cityStatus = false;
					that.city = '城市';
					that.area = '地区';
				};
				const params = {
					provinceId: that.provinceID
				};
				GETcity(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.list.cityList = result;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择城市 */
			changeCity(e) {
				const that = this;
				let index = e.target.value;
				that.city = that.list.cityList[index].areaName;
				that.cityID = that.list.cityList[index].areaId;
				if (that.province != '城市') {
					that.areaStatus = false;
				};
				const params = {
					cityId: that.cityID
				};
				GETarea(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						that.list.areaList = result;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 选择地区 */
			changeArea(e) {
				const that = this;
				let index = e.target.value;
				that.area = that.list.areaList[index].areaName;
				that.areaID = that.list.areaList[index].areaId;
			},

			/* 是否设置为默认 */
			changeDefault(e) {
				if (e === true) {
					this.default_switch = true;
				} else {
					this.default_switch = false;
				};
			},

			/* 收货人失去焦点时 */
			consigneeLostFocus(event) {
				this.consigneeFocus = false;
			},

			/* 手机号失去焦点时 */
			mobileLostFocus(event) {
				this.mobileFocus = false;
			},

			/* 详细地址失去焦点时 */
			addressLostFocus(event) {
				this.addressFocus = false;
			},
		}
	}
</script>

<style lang="scss">
	page {}

	uni-page-body {
		background: none;
	}

	.mine-address-edit {

		.content {
			padding: 30rpx 36rpx;
			font-family: AlibabaPuHuiTi_2_65_Medium;

			.edit-content-input {
				padding: 30rpx;
				border: 1px solid #F4F4F5;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.input-title {
					font-size: 32rpx;
					font-family: AlibabaPuHuiTi_2_65_Medium;
				}

				.input-style {
					width: 400rpx;
					font-size: 30rpx;
					font-family: AlibabaPuHuiTi_2_55_Regular;
					text-align: right;
				}

				.input-placeholder {
					color: rgba(37, 54, 90, 0.4);
					font-size: 30rpx;
					font-family: AlibabaPuHuiTi_2_55_Regular;
				}

				&:nth-of-type(n+2) {
					margin-top: 30rpx;
				}
			}

			.edit-content-input-two {
				margin-top: 30rpx;
				padding: 30rpx;
				border: 1px solid #F4F4F5;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.area-content {
					display: flex;
					align-items: center;

					.area-input {
						color: rgba(37, 54, 90, 0.4);
						font-size: 15px;
						text-align: center;

						.text {
							width: 400rpx;
							text-align: right;
							word-break: keep-all;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.edit-button {
				background-color: rgba(247, 29, 31, 1);
				margin: 100rpx auto 0 auto;
				text-align: center;
				line-height: 100rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				font-family: AlibabaPuHuiTi_2_85_Bold;
				border-radius: 10rpx;
			}
		}
	}
</style>
